import { useState } from "react";

import "./index.css";

export default function AddTodo(props) {
  // 通过受控组件方式，收集表单数据
  const [todoName, setTodoName] = useState("");
  const handleChange = (e) => {
    setTodoName(e.target.value);
  };

  const handleKeyUp = (e) => {
    // 1. 判断是否回车键
    if (e.key !== "Enter") return;
    // if (e.keyCode !== 13) return;

    // 2. 获取表单数据, 判断数据是否为空
    // console.log(e.target.value); // 可以拿到数据
    if (!todoName) return;

    // 3. 添加todo
    // 数据在App组件，App是AddTodo的父组件。需求：需要修改App组件的todoList数据
    // -> 父组件定义更新数据的方法，传递给子组件使用
    // 总结：数据源在哪里，更新数据的方法就定义在哪？
    props.addTodo(todoName);

    // 4. 添加完成，需要清空数据
    // inputRef.current.value = ''; // 在React中不建议直接操作DOM
    setTodoName("");
  };

  return (
    <div className="todo-header">
      <input
        type="text"
        placeholder="请输入你的任务名称，按回车键确认"
        onChange={handleChange}
        onKeyUp={handleKeyUp}
        value={todoName}
      />
    </div>
  );
}
